<template>
  <div class="storyList">
    <div
      class="list"
      v-for="s in storyList"
      :key="s.chapter_id"
      @click="artList(s.chapter_id, s.isFree,$event)"
    >
      {{ "第" + s.index + "章" }}
      <div class="isfree" v-if="freeFlag">{{ s.isFree == "Y" ? "" : "付费" }}</div>
    </div>

    <div class="confrim"  v-show="comfrimFlag">
      <div class="desc">
         确认购买本书吗？消耗胖币：{{price}}
      </div>
       
        <div class="btn">
          <button class="left" @click="sure">确认</button>
          <button @click="comfrimFlag = false">取消</button>
        </div>
      </div>
     
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: null,
      comfrimFlag:false,
      isfree:true,
      freeFlag:true
    };
  },
  props: {
    storyList: Array,
    author: String,
    price:Number
  },
  methods: {
    sure() {
      let userInfo = localStorage.userInfo
        ? JSON.parse(localStorage.userInfo)
        : {};

      let nowprice=userInfo.pangbi

      if(nowprice>this.price){
       this.isfree=true
       localStorage.userInfo = JSON.stringify({
        pangbi: nowprice-parseInt(this.price),
      });
      this.freeFlag=false
      }else{
        alert('余额不足')
      }

      this.comfrimFlag=false
      
    },
    artList(id,free,e) {
      
      let str=e.target.textContent.split(' ')[2]
      console.log(str)
      if (str==='') {
        this.name = JSON.parse(sessionStorage.storyList).route;
        if (this.$route.name == `/${this.name}story/${this.name}content`) {
          this.$router.go(-1);
        } else {
          this.$router.push({
            name: `${this.name}content`,
          });
        }
        sessionStorage.contentList = JSON.stringify({
          id: id,
          author: this.author,
        });
      }else{
        this.comfrimFlag=true
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.storyList{
  margin-bottom: 100px;
}
.list {
  display: flex;
  width: 100vw;
  height: 100px;
  border-bottom: 1px solid rgb(130, 120, 120, 0.3);
  text-align: left;
  line-height: 100px;
  padding: 0 30px;
  justify-content: space-between;
  
}

.confrim {
      z-index: 300;
      width: 50%;
      height: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      background-color: rgb(179, 172, 172);
      border-radius: 20px;
      .desc{
        padding: 20px;
      }
      
      .btn {
        display: flex;
        position: absolute;
        justify-content: space-around;
        width: 100%;
        bottom: 0;
        button {
          border-radius: 10px;
          width: 80px;
          height: 30px;
          background-color: rgb(98, 80, 80);
          color: white;
          font-size: 12px;
          border: 0;
        }
      }
    }
</style>